﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>服务通知</title>
        <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
        <meta content="yes" name="apple-mobile-web-app-capable"/>
        <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
        <meta content="telephone=no" name="format-detection"/>
        <link href="/js/bootstrap/css/style_1.css" rel="stylesheet" type="text/css"/>
        <script src="../js/jquery/jquery.min.js"></script>
        <script type="text/javascript" src="/js/bootstrap/js/bootstrap.min.js"></script>
        <script src="/js/plugins/jrender/jrender.min.js"></script>
        <script src="/js/plugins/jquery-form/jquery.form.js"></script>
        <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
        <script src="/js/plugins/dialog2/dialog.min.js"></script>
        <script>
            $(function () {
                var userStr = sessionStorage.getItem("user");
                var user = JSON.parse(userStr);
                //直接将currentPage写死,那么只会查询到第二页的数据,之前的data数据丢失,所以此处定义一个临时变量存放data的参数
                var dataList=[];
                var dataList1=[];
                var currentPage =1;
                var currentPage1 =1;
                var totalPage=0;
                var totalPage1=0;
                var flag1=true;
                //查询未读
                systemUnreadMsgQuery();
                $.get("/systemmessages/"+user.id,{userId:user.id,currentPage:currentPage1,pageSize:3,state:1},function (data) {
                    totalPage1 = data.pages;
                })
                //定义未读查询
                function systemUnreadMsgQuery() {
                    $.get("/systemmessages/"+user.id,{userId:user.id,currentPage:currentPage,pageSize:3,state:0},function (data) {
                        $.merge(dataList,data.list)
                        $("#unread").renderValues({list:dataList})
                        currentPage +=1;
                        totalPage = data.pages;
                        if(data.size==0){
                            flag1=false;
                            $("#count").html("没有未读")
                            systemReadedMsgQuery();
                        }
                    })
                }
                        var flag=true;
                //定义已读查询
                function systemReadedMsgQuery() {
                    $.get("/systemmessages/"+user.id,{userId:user.id,currentPage:currentPage1,pageSize:3,state:1},function (data) {
                        var html1="<div class='aui-service-circle\'>\n" +
                            "<span id='count'>已读</span>\n"+
                            "</div>"
                        if (flag){
                            $("#unread").append(html1)
                            flag=false;
                        }
                        var html="";
                        $.each(data.list,function (index, value) {
                            html+="<div class=\"aui-service-box\">\n" +
                                "\n" +
                                "                    <div class=\"aui-service-circle\">\n" +
                                "                        <span >"+value.createTime+"</span>\n" +
                                "                    </div>\n" +
                                "                    <div class=\"aui-service-list\">\n" +
                                "                        <h3>通知</h3>\n" +
                                "                        <a href=\"javascript:;\" class=\"aui-news-item\">\n" +
                                "                            <div class=\"aui-news-item-hd\">\n" +
                                "                                <img src=\"/picture/computer.jpg\" alt=\"\">\n" +
                                "                            </div>\n" +
                                "                            <div class=\"aui-news-item-bd\">\n" +
                                "                                <p >"+value.content+"</p>\n" +
                                "                            </div>\n" +
                                "                        </a>\n" +
                                "                    </div>\n" +
                                "                </div>"

                        })
                        $("#unread").append(html)

                        currentPage1+=1;
                        totalPage1=data.pages;
                    })
                }

            //滑动分页
            $(window).scroll(function () {
                if($(window).height()+$(window).scrollTop()>=$(document).height()){
                    //console.log($(window).height());console.log($(window).scrollTop());console.log($(document).height());
                    //判断当前页是否小于等于总页数
                    if(currentPage<=totalPage){
                        console.log(currentPage);
                        systemUnreadMsgQuery();
                    }else if(currentPage1<=totalPage1){
                        systemReadedMsgQuery();
                    }
                    else{
                        $(document).dialog({
                            type : 'notice',
                            infoText: '亲.我也是有限度的',
                            autoClose: 2500,
                            position: 'bottom'  // center: 居中; bottom: 底部
                        });
                    }
                }
            })
                $("#markReaded").click(function () {
                    $.ajax({
                        type:"Put",
                        url:"/systemmessages/"+user.id+"/updateAllState",
                        data:{userId:user.id},
                        success:function(data) {
                            if (flag1){
                                if (data.success){
                                    window.location.reload()
                                }else {
                                    alert(data.msg)
                                }
                            } else {
                                $(document).dialog({
                                    type: 'notice',
                                    infoText: '没有未读消息',
                                    autoClose: 2500,
                                    position: 'bottom'  // center: 居中; bottom: 底部
                                })
                            }
                        }
                    })
                })
            })
        </script>

    </head>
    <body>

        <!--

         * 17素材vip建站专区模块代码
         * 详尽信息请看官网：http://www.17sucai.com/pins/vip
         *
         * Copyright , 温州易站网络科技有限公司版权所有
         *
         * 请尊重原创，未经允许请勿转载。
         * 在保留版权的前提下可应用于个人或商业用途

        -->

        <section class="aui-flexView">
            <header class="aui-navBar aui-navBar-fixed">
                <a href="javascript:history.go(-1);" class="aui-navBar-item">
                    <i class="icon icon-return"><</i>
                </a>

                <div class="aui-center">
                    <span class="aui-center-title">服务通知</span>
                </div>
                <a href="javascript:;" class="aui-navBar-item">
                    <i class="icon icon-sys"></i>
                </a>
            </header>

            <section class="aui-scrollView" id="unread">
                <button class="aui-news-item" id="markReaded">
                    全部标记已读
                </button>
                <div class="aui-service-circle">
                    <span id="count">未读</span>
                </div>
                <div render-loop="list">
                <div class="aui-service-box">

                    <div class="aui-service-circle">
                        <span render-html="list.createTime"></span>
                    </div>
                    <div class="aui-service-list">
                        <h3>通知</h3>
                        <a href="javascript:;" class="aui-news-item">
                            <div class="aui-news-item-hd">
                                <img src="/picture/computer.jpg" alt="">
                            </div>
                            <div class="aui-news-item-bd">
                                <p render-html="list.content"></p>
                            </div>
                        </a>
                    </div>
                </div>
                </div>


            </section>

        </section>

    </body>
</html>
